<template>
    <div>
  
        <!-- 中间左右-->
        <!-- 跳转时，或者页面打开就发送分类请求，和第一个brand的请求，mounted接收，渲染左边 -->
        <!-- click-nav事件名，默认参数index,@click-nav="clickNav" -->
      <van-tree-select :items="items" :main-active-index.sync="active">
            <template #content>
                <!-- arrActive是有多少分类的数据 -->
                <div v-for="(v,index) in arrActive" :key="index" v-show="active === index">
                    <h4>猜你喜欢</h4>
                    <van-grid :border="false" :column-num="3">
                        <!-- arrSelect是分类得brand有多少 -->
                        <van-grid-item v-for="(v, index ) in arrSelect[index]" :key="index" @click="goDetail(v)">
                            <img :src="v.img1" alt="">
                            <p>{{ v.brand}}</p>
                        </van-grid-item>
                    </van-grid>  
                </div>
            <!-- <div v-if="active === 1">
                    <h4>热门品牌</h4>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect1" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                    <h4>手机通讯</h4>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect2" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
              </div>

                <van-image v-if="active === 2">
                    <h4>热门分类</h4>
                  
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 3">
                    <h4>热门分类</h4>
                  
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 4">
                    <h4>热门分类</h4>
                  
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 5">
                    <h4>热门分类</h4>
                 
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 6">
                    <h4>热门分类</h4>

                 
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 7">
                    <h4>热门分类</h4>

                
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 8">
                    <h4>热门分类</h4>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 9">
                    <h4>热门分类</h4>
                
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image>
                <van-image v-if="active === 10">
                    <h4>热门分类</h4>
                 
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(v, index ) in arrSelect" :key="index">
                            <img :src="v.img" alt="">
                            <p>{{ v.txt }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-image> -->
            </template>
        </van-tree-select>
   
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            active:0,
            arrActive:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            actions: [{ text: '首页' }, { text: '分类搜索' }, { text: '购物车' }, { text: '我的京东' }, { text: '浏览记录' }],
            items: [],
            // 写为数组套数组
            arrSelect: [
            ],
            category: [],
            brand:[]
            

        }
    },
    components: {
      
    },
    methods: {
        goDetail(v) {
            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)

                }
            })
        },

    },
    async created() {
  
      const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/categorylist')
        res.data.forEach((v) => {
            this.category.push(v)
            this.items.push({ text: `${v}` })

        });
        // json.serve
         this.$http({
            url: 'http://localhost:3000/classify',
            method:"get"
         }).then(res => {
             this.arrSelect = res.data
        })
 
    }
}
</script>

<style scoped>
.van-search {
    padding: 0;
    width: 5.86rem;
    height: .6rem;
}

.van-search__content {
    border-radius: .36rem;
}

::v-deep .van-button--primary {
    background: transparent;
    border: none;
}

/* botttom */
.van-sidebar-item--select::before {
    display: none;
}

.van-tree-select {
    height: auto !important;
}

/* 右侧 */
::v-deep .van-image__img{
     height: 1.4rem;
}
.van-grid-item img {
    width: 1.4rem;
    height: 1.4rem;
}

.van-tree-select__content {
    flex: 3;
}

.van-tree-select__content h4 {
    margin-top: .3rem;
    margin-left: .3rem;
}
</style>